<template>
  <task-container @pageDatas="getPageDatas" @selectItemClick="onSelectItem" @setOperation="onSetOperation">
    <a-card title="查询结果" :bordered="false" size="small" :bodyStyle="{ padding: 0 }">
      <a-button slot="extra" @click="doFetch" v-if="isOperation"> 更新数据 </a-button>
      <div class="c-box">
        <a-tabs v-model="type" @change="callback">
          <a-tab-pane :key="1" tab="内部重点人分析">
            <div class="inside_box">
              <div class="inside_top_box">
                <div class="inside_color_box">
                  <div class="color_box">
                    <div class="border_box" style="background-color:#92939d;"></div>
                    <div clas="color_desc_box">低</div>
                  </div>
                  <div class="color_box">
                    <!-- <div class="border_box" style="background-color:#FACD91;"></div> -->
                    <div class="border_box" style="background-color:#6766b8;"></div>
                    <div clas="color_desc_box">中</div>
                  </div>
                  <div class="color_box">
                    <!-- <div class="border_box" style="background-color:#81D3F8"></div> -->
                    <div class="border_box" style="background-color:#50a4ab"></div>
                    <div clas="color_desc_box">高</div>
                  </div>
                </div>
                <a-button type="primary" style="margin-left:10px;" @click="showModalYZ(true)">阈值设置</a-button>
                <a-modal
                  title="阈值设置"
                  :visible="visibleYZ"
                  @ok="handleOkYZ"
                  :confirmLoading="confirmLoading"
                  @cancel="handleCancelYZ"
                >
                  <div style="margin-bottom: 20px;">通联次数范围：</div>
                  <div class="relationship_eChart_num_box">
                    <div class="relationship_eChart_num_row_box">
                      <div class="relationship_eChart_num_text_box">低： 0 -</div>
                      <a-input-number
                        class="relationship_eChart_num_input_box"
                        :min="1"
                        type="Number"
                        @change="lowNumInput"
                        v-model="lowNum"
                      ></a-input-number>
                    </div>
                    <div class="relationship_eChart_num_row_box">
                      <div class="relationship_eChart_num_text_box">中： {{ lowNum + 1 }} -</div>
                      <a-input-number
                        class="relationship_eChart_num_input_box"
                        :min="3"
                        type="Number"
                        @change="middleNumInput"
                        v-model="middleNum"
                      ></a-input-number>
                    </div>
                    <div class="relationship_eChart_num_row_box">
                      <div class="relationship_eChart_num_text_box">高： {{ middleNum + 1 }} - Max</div>
                    </div>
                  </div>
                </a-modal>
              </div>
            </div>
            <div class="eChartRelationship_box1">
              <relation-graph
                :leftList="dataList1"
                :lowNumEchart="lowNum"
                :middleNumEchart="middleNum"
                :type="type"
                :data="data"
              />
            </div>
          </a-tab-pane>
          <a-tab-pane :key="2" tab="外部重点人挖掘" force-render>
            <div class="outside_box">
              <div class="inside_top_box">
                <div class="inside_color_box">
                  <div class="color_box">
                    <!-- <div class="border_box" style="background-color:#ff6600;"></div> -->
                    <div class="border_box" style="background-color:#92939d;"></div>
                    <div clas="color_desc_box">内部</div>
                  </div>
                  <div class="color_box">
                    <!-- <div class="border_box"></div> -->
                    <div class="border_box" style="background-color:#6766b8;"></div>
                    <div clas="color_desc_box">外部</div>
                  </div>
                  <div class="outside_input_box">
                    <span>通联人数：</span>
                    <a-input-number :min="2" :max="10" v-model="num" @change="onChangeNum" />
                  </div>
                </div>
              </div>
            </div>
            <div class="eChartRelationship_box2">
              <relation-graph
                :leftList="dataList1"
                :lowNumEchart="lowNum"
                :middleNumEchart="middleNum"
                :type="type"
                :data="data"
              />
            </div>
          </a-tab-pane>
        </a-tabs>
      </div>
    </a-card>
    <details-drawer ref="drawerRef" :taskId="taskId" :phone="selectItem.phone" :title="titleDrawer" @close="close" />
  </task-container>
</template>
<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
import taskContainer from './modules/taskContainer'
import relationGraph from './modules/echart_relation_graph'
import detailsDrawer from './modules/gangRelationsDrawer'
export default {
  components: {
    taskContainer,
    relationGraph,
    detailsDrawer
  },
  data() {
    return {
      taskId: null,
      selectItem: {
        msisdn: null
      },
      visibleYZ: false,
      confirmLoading: false,
      type: 1,
      num: 2,
      number: 0, // 内部重点人分析
      lowNum: 0,
      middleNum: 0,
      dataList1: [],
      encryption: 1, // 0：加密; 1：不加密
      // 关系图参数
      data: {},
      titleDrawer: null,
      isOperation: true
    }
  },
  mounted() {},
  methods: {
    onSetOperation(isOperation) {
      this.isOperation = isOperation
    },
    // 点击目标人员
    onSelectItem(item) {
      this.selectItem = item
      this.taskId = item.taskId
      this.titleDrawer = item.phone + '与团伙号码通联分析'
      this.$refs.drawerRef.add()
    },
    getPageDatas(datas) {
      console.log(datas)
      this.dataList1 = datas.records
      this.callback(1)
    },
    // tabs切换
    callback(e) {
      this.data = {}
      if (e === 1) {
        this.type = 1
        this.number = 0
        this.data = {
          taskId: this.taskId,
          // type: this.type,
          phone: this.selectItem.phone,
          num: this.number, // 通联人数
          encryption: this.encryption
        }
        this.showModalYZ()
        // this.getData1.type = 1
        // this.getPeopleList()
      } else if (e === 2) {
        this.num = 2
        this.type = 2
        this.number = 2
        this.data = {
          taskId: this.taskId,
          // type: this.type,
          phone: this.selectItem.phone,
          num: this.number, // 通联人数
          encryption: this.encryption
        }
        // this.getData1.type = 2
        // this.getPeopleList()
      }
    },
    // 打开阈值设置弹窗
    showModalYZ(YZ) {
      if (YZ) {
        this.visibleYZ = true
      } else {
        let data = {}
        data = {
          taskId: this.taskId
        }
        // 阈值查询
        alarmServiceApi.getThreshold(data).then(res => {
          if (res.success) {
            this.lowNum = res.result.smallParameters ? res.result.smallParameters : 1
            this.middleNum = res.result.bigParameters ? res.result.bigParameters : 3
          } else {
            this.$message.warning(res.message)
          }
        })
      }
    },
    // 阈值设置
    handleOkYZ(e) {
      this.confirmLoading = true
      let data = {}
      data = {
        bigParameters: this.middleNum,
        id: this.taskId,
        smallParameters: this.lowNum
      }
      // 阈值设置
      alarmServiceApi.setThreshold(data).then(res => {
        if (res.success) {
          setTimeout(() => {
            this.visibleYZ = false
            this.confirmLoading = false
            this.$message.success('阈值设置成功')
          }, 2000)
        }
      })
    },
    // 阈值输入框变化
    lowNumInput(e) {
      this.lowNum = Number(e)
    },
    middleNumInput(e) {
      this.middleNum = Number(e)
    },
    handleCancelYZ(e) {
      this.visibleYZ = false
    },
    // 通联人数
    onChangeNum(e) {
      if (e >= 2 && e <= 10) {
        this.data = {
          taskId: this.taskId,
          type: this.type,
          number: e, // 通联人数
          encryption: this.encryption
        }
      }
    },
    close() {},
    // 更新数据
    doFetch() {
      // let form = {
      //   taskId: this.taskId
      //   // msisdn: this.selectItem && Object.keys(this.selectItem).length>0 && this.selectItem.msisdn?this.selectItem.msisdn: null
      // }
      // alarmServiceApi
      //   .updateGangsRelationData(form)
      //   .then(res => {
      //     if (res.success) {
      //       this.$message.success(res.message ? res.message : '更新成功')
      //     } else {
      //       this.$message.warn(res.message ? res.message : '更新失败')
      //     }
      //   })
      //   .catch(e => {
      //     this.$message.warn('请求失败！')
      //   })
    },
  }
}
</script>
<style lang="less" scoped>
/deep/.menuBox {
  height: auto;
}
/deep/.row-selected {
  background-color: #e6f7ff;
}

.thgx-table1 {
  .ant-table-pagination.ant-pagination {
    position: absolute;
    // left: 100px;
    margin-top: 25px;
    margin-bottom: 50px;
  }
}
.thgx-table2 {
  .ant-table-pagination.ant-pagination {
    width: 100%;
    position: absolute;
    left: 5%;
    margin-top: 25px;
    margin-bottom: 50px;
  }
}
.thgx-table3 {
  .ant-table-pagination.ant-pagination {
    position: absolute;
    left: 25%;
    margin-top: 25px;
    margin-bottom: 50px;
  }
}
// .eChartRelationship_box1 {
// margin-left: -350px;
// }
.eChartRelationship_box2 {
  padding-top: 20px;
  // margin-left: -200px;
}
.thgx_box {
  padding: 16px 32px 0 32px;
}
.thgx_top_box {
  margin-bottom: 18px;
}
.thgx_table_btn_box {
  margin-bottom: 15px;
}
.relationship_eChart_box {
  margin-left: 22px;
}
.inside_top_box {
  display: flex;
  align-items: flex-end;
}
.inside_color_box {
  display: flex;
  align-items: center;
}
.color_box {
  display: flex;
  margin-right: 15px;
}
.border_box {
  margin-right: 6px;
  width: 40px;
  height: 15px;
  line-height: 15px;
  text-align: center;
  border: 1px solid #000;
  // background-color: #ec808d;
  background-color: #92939d;
}
.outside_input_box {
  display: flex;
  align-items: center;
}
.relationship_eChart_num_box {
  margin-left: 45px;
}
.relationship_eChart_num_row_box {
  margin-bottom: 20px;
}
.relationship_eChart_num_text_box {
  margin-right: 8px;
  display: inline-block;
}
.relationship_eChart_num_input_box {
  display: inline-block;
  width: 100px;
}
</style>
